<!DOCTYPE html>

<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="/layui/css/layui.css">
	</head>
	<body>
		<form class="layui-form">
			<div class="layui-form-item">
				<label class="layui-form-label">房间号</label>
				<div class="layui-input-inline">
					<input type="text" name="number" class="layui-input" disabled="disabled">
				</div>
				<label class="layui-form-label">类型</label>
				<div class="layui-input-inline">
					<input type="text" name="type" class="layui-input" disabled="disabled">
				</div>
			</div>
		
			<div class="layui-form-item">
				<label class="layui-form-label">预退房时间</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" name="end" id="end">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">预交房费</label>
				<div class="layui-input-inline">
					<input type="number" name="cost" required lay-verify="required"
						placeholder="请输入预交房费" class="layui-input">
						
				</div>
				<label class="layui-form-label">预交押金</label>
				<div class="layui-input-inline">
					<input type="number" name="deposit" required lay-verify="required"
						placeholder="请输入预交押金" class="layui-input">
				</div>
			</div>
			
	
		
		<div class="layui-form-item user" id="user-1">
			<label class="layui-form-label">房客：电话</label>
			<div class="layui-input-inline">
				<input type="text" name="phone" placeholder="请输入用户的电话号码"
				class="layui-input" required lay-verify="required">
			</div>
		
	<label class="layui-form-label">姓名</label>
		<div class="layui-input-inline">
			<input type="text" name="name" placeholder="请输入用户的姓名"
			class="layui-input" required lay-verify="required">
		</div>
	
			<label class="layui-form-label">身份证号</label>
			<div class="layui-input-inline">
				<input type="text" name="idcard" placeholder="请输入用户的身份证号" 
				class="layui-input" required lay-verify="required">
			</div>
			<input type = "hidden" name="userId">
		</div>
		
		<div class="layui-form-item user" id="user-2">
			<label class="layui-form-label">房客：电话</label>
			<div class="layui-input-inline">
				<input type="text" name="phone" placeholder="请输入用户的电话号码"
				class="layui-input">
			</div>
		
	<label class="layui-form-label">姓名</label>
		<div class="layui-input-inline">
			<input type="text" name="name" placeholder="请输入用户的姓名"
			class="layui-input">
		</div>
	
			<label class="layui-form-label">身份证号</label>
			<div class="layui-input-inline">
				<input type="text" name="idcard" placeholder="请输入用户的身份证号" 
				class="layui-input">
			</div>
			<input type ="hidden" name="userId">
		</div>
		
		<div class="layui-form-item">
			<div class="layui-input-block">
				<input type="hidden" name="id">
				<button type="button" class="layui-btn layui-btn-normal" id="add-user">添加房客</button>
				<button class="layui-btn" lay-submit lay-filter="checkin">立即办理</button>
			</div>
		</div>
		
		
		</form>
		
		<script type="text/javascript" src="/layui/layui.js"></script>
		<script type="text/javascript">
			layui.use(['form', 'layer'],function(){
				var form = layui.form,
				laydate = layui.laydate;
				layer = layui.layer;
				$ = layui.$;
				
				//读取入住的预订信息
				var order = JSON.parse(sessionStorage.getItem('order'));
				$("input[name = 'number']").val(order.room.number);
				$("input[name = 'type']").val(['大床房','标准间','三人间'][order.room.type]);
				$("input[name = 'id']").val(order.id);
				
				$("input[name = 'end']").val(order.end);
				
				//添加顾客
				$("#add-user").click(function(){
					var div =$("#user-2").clone();
					
					div.insertAfter("#user-2");
				});
				
				
				
				//时间日期控件
				laydate.render({
					elem: '#end',
					type: 'datetime',
					
				});

			
			//添加用户输入房客电话，事件的预绑定
			$("form").on('change', "input[name='phone']",function(){
				//需要根据电话，查询用户的信息
				var parent = $(this).parents('.user');
				var phone = $(this).val();
				
				//根据电话查询数据库中是否已有该用户
				$.ajax({
					url:'/api/user/search',
					data:{phone: phone},
					type: 'get',
					dataType: 'json',
					success: function(result){
						if(result.code >= 0){
							//获取查询到的用户信息
							if(result.data && result.data.length > 0){
								//姓名
								parent.find("input[name='name']").val(result.data[0].name);
								//身份证号
								parent.find("input[name='idcard']").val(result.data[0].idcard);
								//id
								parent.find("input[name='userId']").val(result.data[0].id);
							}else{
								parent.find("input[name='userId']").val("");
								layer.msg('未查询到相关用户');
							}
						}else{
							layer.msg(result.msg);
						}
						
					},
					error: function(){
						layer.msg('请求失败');
					}
					
				});
			});
			
			//表单的提交
			form.on('submit(checkin)',function(data){
				//删除表单中，无用的数据
				delete data.field.idcard;
				delete data.field.userId;
				delete data.field.phone;
				delete data.field.name;
				delete data.field.number;
				delete data.field.type;
				
				var users = [];
				//遍历用户的信息，并且添加到表单字段中
				$('.user').each(function(){
					var user= {};  //定义一个对象
					
					var userId = $(this).find("input[name='userId']").val();
					var name = $(this).find("input[name='name']").val();
					var phone = $(this).find("input[name='phone']").val();
					var idcard = $(this).find("input[name='idcard']").val();
					
					user.id = userId;
					user.name = name;
					user.phone = phone;
					user.idcard = idcard;
					
					//放到数组中
					users.push(user);
					
				});
				data.field.users = users;
				
				console.log(data.field);
				
				//ajax请求
				$.ajax({
					url: '/api/order/checkin',
					data: JSON.stringify(data.field), //传递JSON字符串
					contentType: 'application/json; charset = utf-8', //修改内容类型为JSON
					type: 'post',
					dataType: 'json',
					success: function(result){
						if(result.code > 0){
							parent.layer.msg('入住成功');
							parent.layer.closeAll('iframe');
						}else{
							layer.msg(result.msg);
						}
					},
					error: function(){
						layer.msg('请求失败');
					}
					
				});
				
				return false; //阻止表单自动提交
			})
			
			});
		
		</script>
		
		
	</body>
	
	
</html>